<template>
  <div id="role">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="角色名称">
        <el-input v-model="form.name" placeholder="角色名称查询"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-plus" @click="addinfo">添加角色</el-button>
        <el-dialog title="添加  管理员" :visible.sync="dialogFormVisible">
          <el-form :model="form" >
            <el-form-item label="账户名称" :label-width="formLabelWidth" prop="username" style="margin-bottom:20px;">
              <el-input v-model="form.username" autocomplete="off" ></el-input>
            </el-form-item>
            <el-form-item label="账户昵称" :label-width="formLabelWidth" prop="nickname" style="margin-bottom:20px;">
              <el-input v-model="form.nickname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="手机号码" :label-width="formLabelWidth" prop="phone" style="margin-bottom:20px;">
              <el-input v-model="form.phone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="账户密码" :label-width="formLabelWidth" prop="password" style="margin-bottom:20px;">
              <el-input type='password' v-model="form.password" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="add(dialogFormVisible = false)">确 定</el-button>
          </div>
        </el-dialog>
        <span style="margin-left:800px;">
        <el-button type="primary" icon="el-icon-search">查询</el-button>
        <el-button type="primary" icon="icon-zhongzhi">重置</el-button>
        </span>
      </el-form-item>
    </el-form>
    <el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" border style="width: 100%">
      <el-table-column prop="id" label="id" width="180">
      </el-table-column>
      <el-table-column prop="root" label="角色名称" width="180">
      </el-table-column>
      <el-table-column prop="role_code" label="用户代码">
      </el-table-column>
       <el-table-column prop="role_des" label="说明">
      </el-table-column>
       <el-table-column prop="role_status" label="状态">

          <template slot-scope="scope">
            <el-tag v-if="scope.row.role_status === 1" type="success">正常</el-tag>
            <el-tag type="danger" v-else>禁用</el-tag>
          </template>

      </el-table-column>
       <el-table-column label="Action">
         <el-button type="text" @click="dialogFormVisible1 = true">角色菜单</el-button>

         <el-dialog title="菜单分配" :visible.sync="dialogFormVisible1">
           <el-tree
  :data="data"
  show-checkbox
  node-key="id"
  default-expand-all
  :props="defaultProps">
</el-tree>
           <div slot="footer" class="dialog-footer">
             <el-button @click="dialogFormVisible1 = false">取 消</el-button>
             <el-button type="primary" @click="dialogFormVisible1 = false">确 定</el-button>
           </div>
         </el-dialog>

        <el-button type="text" @click="root">角色权限</el-button>
        <el-button type="text" @click="edit">编辑</el-button>
        <el-button type="text" style="color:red;" @click="del">删除</el-button>
      </el-table-column>
    </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[1,2,5,10]"
        :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="tableData.length">
      </el-pagination>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  name: 'role',
  data () {
    return {
      dialogFormVisible: false,
      dialogFormVisible1: false,
      formLabelWidth: '120px',
      form: {
        name: ''
      },
      pagesize: 1,
      total: 0,
      currentPage: 1, // 默认开始页面
      tableData: [{
        id: '',
        root: '',
        role_code: '',
        role_des: '',
        role_status: ''
      }],
      data: [{
        id: 1,
        label: '数据统计',
        children: [
          {
            id: 4,
            label: '数据统计(地域)'
          },
          {
            id: 4,
            label: '省销售统计(地域)'
          },
          {
            id: 4,
            label: '市销售统计(地域)'
          },
          {
            id: 4,
            label: '区销售统计(地域)'
          },
          {
            id: 4,
            label: '省活跃度统计(地域)'
          },
          {
            id: 4,
            label: '市活跃度统计(地域)'
          },
          {
            id: 4,
            label: '区活跃度统计(地域)'
          }
        ]
      }, {
        id: 2,
        label: '卡号管理',
        children: [{
          id: 5,
          label: '卡号批次管理'
        }]
      }, {
        id: 3,
        label: '大客户专员专区',
        children: [{
          id: 7,
          label: '大客户专员列表'
        }, {
          id: 8,
          label: '设置'
        },
        {
          id: 8,
          label: '订单列表'
        }
        ]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  created () {
    this.getinfo()
  },
  methods: {
    addinfo () {
      this.dialogFormVisible = true
    },
    getinfo () {
      var that = this
      axios
        .get('http://47.108.201.43:3000/api/getGroup', {
          // params: { pageNum: 1, pageSize: 40 }
        })
        .then(function (res) {
          console.log(res)
          that.tableData = res.data.data
        })
    },
    add () {
      const that = this
      axios.post('http://47.108.201.43:3000/api/getGroup', {
        username: this.form.username,
        nickname: this.form.nickname,
        phone: this.form.phone,
        password: this.form.password
      }).then(function (res) {
        that.getInfo()
        console.log(res)
        if (res.data.status) {
          that.$message({
            type: 'success',
            message: '添加成功！'
          })
          that.dialogFormVisible = false
        }
      })
    },
    handleSizeChange (size) {
      console.log(`每页 ${size} 条`)
      this.pagesize = size
    },
    handleCurrentChange (currentPage) {
      this.currentPage = currentPage
      console.log(`当前页: ${currentPage}`)
    },
    root () {
      this.$message('无法设置管理员权限！！！')
    },
    edit () {
      this.$message('无法修改管理员信息！！！')
    },
    del () {
      this.$message('无法删除管理员信息！！！')
    }
  }
}

</script>
<style scoped>
  .el-input {
    width: 200px;
  }
</style>
